<template>
    <div class="main" :style="style">
        <div class="grid-head" ref="gridHead" v-html="gridHeadStr"></div>
        <div class="grid-content" ref="gridContent" v-html="gridContentStr"></div>

    </div>
</template>
<script setup>
const props = defineProps({
    style: {
        type: String,
        required: false,
        default: "",
    },
    data: {
        type: Array,
        default: [{ id: "1", name: "名字123", img: "图片123" }, { id: "2", name: "名字23", img: "图片23" }]
    },
    title: {
        type: Object,
        default: { id: "ID", name: "名字", img: "图片" }
    },
    index: {
        type: Boolean,
        default: true
    }
});
// 表头dom
const gridHead = ref()
// 表头内容
let gridHeadStr = ref('')
// 内容dom
let gridContent = ref('')
// 内容数据
let gridContentStr = ref('')
onMounted(() => {
    // 遍历对象 获取key 和value 动态生成表头div
    let keysArr = Object.keys(props.title)
    // 如果设置展示编号
    if (props.index) {
        // 增加编号列
        gridHeadStr.value += `<div class="title-index">编号</div>`
        // 设置列宽为自适应
        gridHead.value.style.gridTemplateColumns = "auto"
        gridContent.value.style.gridTemplateColumns = "auto"
    }
    for (var i = 0; i < keysArr.length; i++) {
        // 动态生成表头
        gridHeadStr.value += `<div class="title-${keysArr[i]}">${props.title[keysArr[i]]}</div>`
        // 设置 内容自适应
        gridHead.value.style.gridTemplateColumns += " auto"
        gridContent.value.style.gridTemplateColumns += " auto"
    }
    for (var j = 0; j < props.data.length; j++) {
        if (props.index) {
            // 增加编号列
            gridContentStr.value += `<div class="title-index">${j+1}</div>`
          
        }
        for (var i = 0; i < keysArr.length; i++) {
            // console.log(`<div class="content content${i}-${keysArr[i]}">${props.data[j][[keysArr[i]]]}</div>`)
            // 动态生成表头
            gridContentStr.value += `<div class="content content${i}-${keysArr[i]}">${props.data[j][[keysArr[i]]]}</div>`
            // 设置 内容自适应
            // gridHead.value.style.gridTemplateColumns += " auto"
            // 追加内容数据
            // gridContentStr.value += `<div class="title-${keysArr[i]}">${props.title[keysArr[i]]}</div>`

        }
    }

    // 根据内容自动遍历表格

    // gridHead.value.style.grid-template-columns="50px auto auto"
    console.log(gridHead.value.style)
})
</script>
<style scoped>
.main {
    color: #000;
    width: 100%;
    /* display: grid; */
    /* grid-template-columns: 50px auto auto auto auto;
    grid-template-rows: 50px 50px 50px; */
}

.grid-head {
    width: 100%;
    display: grid;
}

.grid-content {
    width: 100%;
    display: grid;
}

.main-title {
    width: 100%;
}

.title {
    padding: 5px;
    text-align: center;
}

.content {
    width: 100%;
    padding: 5px;
}
</style>
